<template>
    <div class="major-box">
        <div class="search-row">
            <div class="search-item">
                <el-input v-model="names" placeholder="请输入用户姓名"></el-input>
                <el-select v-model="roleName" class="m-2" placeholder="请选择角色">
                    <el-option label="教师" value="2" />
                    <el-option label="学生" value="3" />
                </el-select>
                <el-select v-model="status" class="m-2" placeholder="请选择账号状态">
                    <el-option label="正常" value="1" />
                    <el-option label="禁用" value="0" />
                </el-select>
            </div>
            <div class="search-actions">
                <el-button type="primary" @click="getUserList">
                    <el-icon><Search /></el-icon>查询
                </el-button>
                <el-button @click="reset()">
                    <el-icon><RefreshLeft /></el-icon>重置
                </el-button>
            </div>
        </div>
        <div class="table-area">
            <div class="left-buttons">
                <el-button type="primary" ref="onlyRef" v-click-outside="onOnlyClickOutside"> 单条新增 </el-button>
                <el-popover ref="popoverOnlyRef" :virtual-ref="onlyRef" trigger="click" virtual-triggering style="width: 120px!important;">
                    <div class="piliang">
                        <span @click="addTeacher">新增老师账号</span>
                        <span @click="addStu">新增学生账号</span>
                    </div>
                </el-popover>
                <el-button class="manage" @click="importTeacher"> 批量新增T </el-button>
                <el-button class="manage" @click="importStu"> 批量新增S                                  </el-button>
                <el-button class="manage" ref="buttonRef" v-click-outside="onClickOutside">
                    <span>批量操作</span>
                </el-button>
                <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" virtual-triggering>
                    <div class="piliang">
                        <span>删除</span>
                        <span>重置密码</span>
                        <span>冻结</span>
                        <span>激活</span>
                    </div>
                </el-popover>
            </div>
            <el-table ref="multipleTableRef" :data="user" style="width: 100%" @selection-change="handleSelectionChange" >
                <el-table-column type="selection" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="username" label="账号" />
                <!-- <el-table-column prop="major" label="专业" /> -->
                <el-table-column prop="role.roleName" label="角色" />
                <el-table-column prop="status" label="账号状态">
                    <template #default="scope">
                        <span  v-show="scope.row.status == 0">禁用</span>
                        <span  v-show="scope.row.status == 1">正常</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="注册时间" />
                <el-table-column property="name" label="操作">
                    <template #default="scope">
                        <div class="material-operations">
                            <el-link type="primary" @click="editUser(scope.row)" underline="false"><span>编辑</span></el-link>
                            <el-link type="primary" @click="setTeacher(scope.row)" underline="false"><span>激活</span></el-link>
                            <el-link type="primary" @click="showGraph(scope.row)" underline="false"><span>冻结</span></el-link>
                            <el-link type="primary" @click="showDetail(scope.row)" underline="false"><span>重置密码</span></el-link>
                            <el-link type="danger" @click="previewMaterial(scope.row)" underline="false"><span class="danger">删除</span></el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination small background layout="prev, pager, next,total" :total="totalNum" :page-size="pageSize" :current-page="currPage" class="mt-4" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
    <el-dialog v-model="addDialogVisable" title="Tips" width="50%" top="25vh">
        <template #header>
            <div class="my-header">
                <span></span>
            </div>
        </template>
        <div class="teacher-dialog" v-show="teacherVisable">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">教师账号</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="teacherAccount" v-if="edirUserId == 0" placeholder="请输入教师账号" />
                        <el-input v-model="teacherAccount" v-if="edirUserId != 0" placeholder="请输入教师账号" :disabled="true" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">教师姓名</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="teacherName" placeholder="请输入教师姓名" />
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">职业级别</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="position" class="m-2" placeholder="请选择职业级别">
                            <el-option :key="index" :label="item" :value="index" v-for="( item,index ) in levelData" />
                        </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">职称</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="professionalLevel" class="m-2" placeholder="请选择职称">
                            <el-option :key="index" :label="item" :value="index" v-for="( item,index ) in levelData" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item" style="flex: 0 0 49%;">
                    <div class="items">
                        <div class="text">专业</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="major" class="m-2" placeholder="请选择专业">
                            <el-option label="计算机科学与技术" value="计算机科学与技术" />
                            <el-option label="软件工程" value="软件工程" />
                            <el-option label="网络工程" value="网络工程" />
                        </el-select>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="teacher-dialog" v-show="stuVisable">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">学生学号</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="studentNo" v-if="edirUserId == 0" placeholder="请输入学生学号" />
                        <el-input v-model="studentNo" v-if="edirUserId != 0" placeholder="请输入学生学号" :disabled="true" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">学生姓名</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="studentName" placeholder="请输入学生姓名" />
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">学生专业</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="major" class="m-2" placeholder="请选择专业">
                            <el-option label="计算机科学与技术" value="计算机科学与技术" />
                            <el-option label="软件工程" value="软件工程" />
                            <el-option label="网络工程" value="网络工程" />
                        </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">学生年级</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="grade" class="m-2" placeholder="请选择学生年级">
                            <el-option :key="o" label="item.label" value="item.value" v-for="o in 6" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">学生班级</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="className" class="m-2" placeholder="请选择学生班级">
                            <el-option :key="o" label="item.label" value="item.value" v-for="o in 6" />
                        </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">性别</div>
                    </div>
                    <div class="inputs">
                        <el-select v-model="gender" class="m-2" placeholder="请选择性别">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">身份证号码</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="idCard" placeholder="请输入身份证号码" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">电话</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="phone" placeholder="请输入电话" />
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialogVisable = false">取消</el-button>
                <el-button type="primary" @click="addTeacherSubmit()" v-show="teacherVisable">完成</el-button>
                <el-button type="primary" @click="addStuSubmit()" v-show="stuVisable">完成</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="importDialogVisable" title="Tips" width="35%" top="25vh">
        <template #header>
            <div class="my-header">
                <span>新建专业</span>
            </div>
        </template>
        <div class="import-dialog" v-show="teacherVisable">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text" style="flex: 0 0 100px;">下载</div>
                        <el-link type="primary">点击下载批量导入模板</el-link>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text" style="flex: 0 0 100px;">专业</div>
                        <el-select v-model="value" class="m-2" placeholder="请选择专业">
                            <el-option :key="o" label="item.label" value="item.value" v-for="o in 6" />
                        </el-select>
                    </div>
                </div>
            </div>
        </div>
        <div class="import-dialog" v-show="stuVisable">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text" style="flex: 0 0 100px;">下载</div>
                        <el-link type="primary">点击下载批量导入模板</el-link>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text" style="flex: 0 0 100px;">学生专业</div>
                        <el-select v-model="value" class="m-2" placeholder="请选择学生专业">
                            <el-option :key="o" label="item.label" value="item.value" v-for="o in 6" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text" style="flex: 0 0 100px;">学生年级</div>
                        <el-select v-model="value" class="m-2" placeholder="请选择学生年级">
                            <el-option :key="o" label="item.label" value="item.value" v-for="o in 6" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text" style="flex: 0 0 100px;">学生班级</div>
                        <el-select v-model="value" class="m-2" placeholder="请选择学生班级">
                            <el-option :key="o" label="item.label" value="item.value" v-for="o in 6" />
                        </el-select>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="importDialogVisable = false">上传</el-button>
                <el-button @click="importDialogVisable = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="addTeacherDialogVisable" title="Tips" width="35%" top="25vh">
        <template #header>
            <div class="my-header">
                <span>新建专业</span>
            </div>
        </template>
        <div class="import-dialog">
            <div class="add-form">
                <div class="items" style="flex: 0 0 100%;">
                    <div class="text" style="flex: 0 0 100px;">教师/职称</div>
                    <el-select v-model="value" class="m-2" placeholder="请选择教师" style="width: 100%;">
                        <el-option :key="index" :label="item" :value="index" v-for="( item,index ) in levelData" />
                    </el-select>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addTeacher()">取消</el-button>
                <el-button type="primary" @click="addTeacher()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import { ref,unref,defineEmits,onMounted } from 'vue'
    import { RefreshLeft,Search } from '@element-plus/icons-vue'
    import '@wangeditor/editor/dist/css/style.css'
    import { professionalLevel as levelData } from '@/config/dataConfig'
    import api from '@/api/index.js' 
    import { ElMessage } from 'element-plus'

    const addDialogVisable = ref(false);
    const teacherVisable = ref(false);
    const stuVisable = ref(false);
    const importDialogVisable = ref(false);
    const addTeacherDialogVisable = ref(false);
    const emit = defineEmits(['update-show-visable'])
    const names = ref();
    const roleName = ref();
    const status = ref();
    const professionalLevel = ref();
    const teacherName = ref();
    const teacherAccount = ref();
    const organization = ref();
    const position = ref();
    const major = ref();
    const grade = ref();
    const className = ref();
    const studentNo = ref();
    const studentName = ref();
    const gender = ref();
    const idCard = ref();
    const phone = ref();
    const edirUserId = ref(0);
    const userDetail = ref();
    
    const user = ref();
    const addTeacher = async () => {
        addDialogVisable.value = !addDialogVisable.value;
        teacherVisable.value = true
        // stuVisable.value = false
    }
    const addTeacherSubmit = async () => {
        console.log(userDetail.value.name)
        if( edirUserId.value != 0 ){
            const convertProfessionalLevel = (level) => {
                if (typeof level === 'number') {
                    return level;
                }
                console.log('==========', level)
                const index = levelData.indexOf(level);
                console.log( levelData )
                console.log( index )
                return index !== -1 ? index : 0;
            };
            userDetail.value.name = teacherName.value
            userDetail.value.teacher.teacherName = teacherName.value
            userDetail.value.teacher.professionalLevel = convertProfessionalLevel(professionalLevel.value)
            userDetail.value.teacher.organization = organization.value
            userDetail.value.teacher.position = convertProfessionalLevel(position.value)
            userDetail.value.teacher.major = major.value
            userDetail.value.teacher.grade = grade.value
            userDetail.value.teacher.className = className.value
            const response = await api.update_user( userDetail.value )
            addDialogVisable.value = !addDialogVisable.value;
            if( response.success ){
                getUserList()
                ElMessage({ type: 'success', message: '更新成功！', })
            } else {
                ElMessage({ type: 'error', message: '更新失败！', })
            }
        } else {
            const params = {
                teacher: {
                    teacherName: teacherName.value,
                    professionalLevel: professionalLevel.value,
                    teacherAccount: teacherAccount.value,
                    organization: organization.value,
                    position: position.value,
                    major: major.value,
                    grade: grade.value,
                    className: className.value,
                }
            }
            params.id = edirUserId.value
            const response = await api.teacher_save( [params] )
            addDialogVisable.value = !addDialogVisable.value;
            if( response.success ){
                getUserList()
                ElMessage({ type: 'success', message: '新增成功！', })
            } else {
                ElMessage({ type: 'error', message: '新增失败！', })
            }
        }
    }
    const currPage   = ref(1)
    const pageSize   = ref(15)
    const totalNum   = ref(0)
    const handleCurrentChange = (page) => {
        currPage.value = page
        getUserList()
    }
    const reset = () => {
        currPage.value = 1
        names.value = ''
        status.value = ''
        roleName.value = ''
        getUserList()
    }
    const getUserList = async () => {
        const params = {
            pageNum: currPage.value,
            pageSize: pageSize.value,
            name: names.value,
            status: status.value,
            roleId: roleName.value,
        }
        const response = await api.user_list(params)
        user.value = response.list
        totalNum.value = response.total
        console.log( response ) 
    }
    const addStu = async () => {
        addDialogVisable.value = !addDialogVisable.value;
        stuVisable.value = true
        teacherVisable.value = false
    }
    const editUser = async (row) => {
        edirUserId.value = row.id
        if( row.role.roleName == "教师" ){
            addDialogVisable.value = true;
            stuVisable.value = false
            teacherVisable.value = true
        } else if( row.role.roleName == "学生" ){
            addDialogVisable.value = true;
            stuVisable.value = true
            teacherVisable.value = false
        }
        const response = await api.get_user( { id:row.id } )
        userDetail.value =  response.data
        if( row.role.roleName == "教师" ){
            professionalLevel.value = levelData[response.data.teacher.professionalLevel]
            teacherName.value = response.data.teacher.teacherName
            teacherAccount.value = response.data.teacher.teacherAccount
            organization.value = response.data.teacher.organization
            position.value = levelData[response.data.teacher.position]
            major.value = response.data.teacher.major
            className.value = response.data.teacher.className
        } else if( row.role.roleName == "学生" ){
            grade.value = response.data.grade
            className.value = response.data.student.className
            studentNo.value = response.data.student.studentNo
            studentName.value = response.data.student.studentName
            gender.value = response.data.student.gender
            idCard.value = response.data.student.idCard
            phone.value = response.data.student.phone
            major.value = response.data.student.major
        }
    }
    const addStuSubmit = async () => {
        const params = {
            studentNo: studentNo.value,
            studentName: studentName.value,
            gender: gender.value,
            idCard: idCard.value,
            phone: phone.value,
            major: major.value,
            grade: grade.value,
            className: className.value,
        }
        const response = await api.add_student([ params ])
        addDialogVisable.value = !addDialogVisable.value;
        if( response.success ){
            getUserList()
            ElMessage({ type: 'success', message: '新增成功！', })
        } else {
            ElMessage({ type: 'error', message: '新增失败！', })
        }
    }
    const setTeacher = () => {
        emit('update-show-visable', 1);
    }
    const showDetail = () => {
        emit('update-show-visable', 2);
    }
    const importTeacher = () => {
        importDialogVisable.value = !importDialogVisable.value;
        teacherVisable.value = true
        stuVisable.value = false
    }
    const importStu = () => {
        importDialogVisable.value = !importDialogVisable.value;
        stuVisable.value = true
        teacherVisable.value = false
    }
    const buttonRef = ref()
    const popoverRef = ref()
    const onClickOutside = () => {
        unref(popoverRef).popperRef?.delayHide?.()
    }
    const onlyRef = ref()
    const popoverOnlyRef = ref()
    const onOnlyClickOutside = () => {
        unref(popoverOnlyRef).popperRef?.delayHide?.()
    }
    onMounted(() => {
        getUserList();
    });
</script>
<style scoped>
    :deep(.el-input__wrapper){background: #F2F3FA!important;}
    :deep(.el-table__row:nth-child(odd)){background: #ffffff!important;}
    :deep(.el-table__row:nth-child(even)){background: #F5F8FE!important;}
    :deep(.el-table th.el-table__cell) { background-color: #D2E3FB; }
    :deep(.el-input) { width: 100%;height: 35px; }
    :deep(.search-item .el-input) { flex: 0 0 200px;height: 35px; }
    :deep(.el-select) { flex: 0 0 200px;height: 35px; }
    :deep(.el-select__wrapper) { height: 35px; }
    :deep(.dialog-footer span) { font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px!important; }
    .major-box{width: 100%;border-radius: 8px;height: calc(85vh + 20px);background: #fff;}
    .search-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px;background: #fff;padding: 20px;border-radius: 8px;justify-content: space-between; }
    .search-item { display: flex;flex-direction: row;gap: 20px; }
    .el-button:hover{color: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary{background: #1465E1!important;border: 1px solid #1465E1;}
    .el-button--primary:hover{color: #fff!important;}
    .table-area { background: white; border-radius: 4px; padding: 20px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
    .table-area .text{ width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .pages{display: flex;flex-direction: row;justify-content: end;position: absolute;bottom: 30px;right: 30px;}
    .material-operations{display: flex;justify-content: space-around;font-family: 微软雅黑, Microsoft YaHei, SimSun;}
    .material-operations span{font-size: 12px!important;}
    .material-operations span:hover{color: #1465E1;}
    .material-operations .danger:hover{color: red;}
    .add-major{width: 120px;background: #1465E1;height: 35px;display: flex;flex-direction: row;align-items: center;justify-content: center;border-radius: 4px;margin-bottom: 20px;cursor: pointer;}
    .add-major img{width: 20px;height: 20px;}
    .add-major span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;color: #fff;font-size: 14px;}
    .my-header{text-align: left;}
    .add-form{ width: calc(100% - 30px);margin: 10px auto;display: flex;flex-direction: row; gap: 20px; }
    .form-item{flex: 1;}
    .add-form .items{display: flex;flex-direction: row;gap: 5px;align-items: center;}
    .add-form .items .reds{ color: red; }
    .add-form .inputs{ margin-top: 10px; }
    .left-buttons { display: flex; gap: 12px; height: 55px; }
    .left-buttons img{width: 18px;}
    .left-buttons .btns{background: #1465E1;height: 35px;}
    .left-buttons .manage{color: #1465E1;height: 35px;border: 1px solid #1465E1;}
    .left-buttons span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;}
    .class-switch{position: relative;}
    .class-switch .switch-item { cursor: pointer; position: relative; transition: color 0.3s ease; text-align: center; color: #7f8c8d;z-index: 2; }
    .slider { border-radius: 35px; height: 35px; background: #3869E7; z-index: 1; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); position: absolute; top: 0; }
    .switch-item.active { color: white; }
    .mode-1 { background: #1465E1; }
    .mode-2 { background: #1465E1; }
    .form-item .class-switch{display: flex;flex-direction: row;width: 100%;background: #F7F7F7;border-radius: 40px;margin-top: 10px;}
    .form-item .class-switch .switch-item{width: 50%;height: 35px;line-height: 35px;}
    .left-item{display: flex;flex-direction: row; flex: 0 0 49%;gap: 10px;}
    .avatar-uploader .avatar { width: 178px; height: 178px; display: block; }
    :deep(.avatar-uploader) { display: flex;flex-direction: row;justify-content: start; }
    :deep(.avatar-uploader .el-upload) { border: 1px dashed var(--el-border-color); border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; transition: var(--el-transition-duration-fast); }
    :deep(.avatar-uploader .el-upload:hover) { border-color: var(--el-color-primary); }
    :deep(.el-icon.avatar-uploader-icon) { font-size: 28px; color: #8c939d; width: 178px; height: 178px; text-align: center; }
    .import-dialog .add-form{margin-top: 20px;}
    .piliang{ display: flex;flex-direction: column; }
    .piliang span{display: block;padding: 5px 0 5px 0;text-align: center;cursor: pointer;}
    .piliang span:hover{background: #dfdfdf;}
    :deep(.el-popover.el-popper){padding: 0!important;min-width: 120px;}
    :deep(.el-popover){width: 120px;}
</style>